<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="searchParams.params" @on-search="search" @on-reset="resetSearch"></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table ref="tableRef" :fetch="fetch" :columns="tableConfig.columns" :operate="operate"
            :param="state.param" :toolbar="toolbar" :pagination="pagination">
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>
<script setup>
  import {
    btnIsPowerByCode,
    filterEmptyByObject
  } from '@/tools/common'
  import {
    message,
    modal
  } from 'ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    remove
  } from "@/api/module/student/deposit-manage";
  import {
    reactive,
    createVNode,
    ref,
    onMounted,
    onActivated
  } from 'vue';
  import {
    useRouter
  } from 'vue-router'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import dictEnum from '@/const/dict'
  import moment from 'moment';
  import { useI18n } from "vue-i18n";
  const  { t } = useI18n();
  const removeKey = "remove";
  const tableRef = ref()
  const router = useRouter()
  const pagination = {
    pageNum: 1,
    pageSize: 10,
  }
  let dictLists = reactive({
    data: {}
  })
  const state = reactive({
    selectedRowKeys: [],
    param: {},
    visibleSave: false,
    visibleEdit: false,
    visibleInfo: false,
    recordEdit: {},
    recordInfo: {},
  })

  let searchParams = reactive({
    params: []
  })

  let tableConfig = reactive({
    columns: []
  })
	const toolbar = [{
		code: '',
		label: '新增订金',
		type: 'primary',
		event: (selectedRowKeys) => {
			router.push('/studentrtv/deposit-manage/add')
		}
	}]
  const resetSearch = () => {
    state.param = {
      name: null,
      credentialHighest: null,
      serviceSchool: null,
      createTime: null,
      citizenship: null
    }
    tableRef.value.reload()
  }
onActivated(() => {
    tableRef.value.reload();
  })
  /// 数据来源 [模拟]
  const fetch = async (param) => {
    const response = await page(param);
    return {
      data: response.data.record,
      total: response.data.total
    };
  };

  /// 行操作
  const operate = [
    {
      label: t('button.detail'),
      event: (record) => {
        router.push({
          path: '/studentrtv/deposit-manage/detail',
          query: {
            id: record.id
          }
        })
      }
    },
    {
      label: t('button.delete'),
      event: function(record) {
        removeMethod(record)
      }
    }
  ];
  /// 删除配置
  const removeMethod = (record) => {
    modal.confirm({
      title: '您是否确定要删除此配置?',
      icon: createVNode(ExclamationCircleOutlined),
      okText: '确定',
      cancelText: '取消',
      onOk() {
        message.loading({
          content: "提交中...",
          key: removeKey
        });
        remove({
          "id": record.id
        }).then((response) => {
          if (response.success) {
            message.success({
              content: "删除成功",
              key: removeKey,
              duration: 1
            }).then(() => {
              tableRef.value.reload()
            })
          } else {
            message.error({
              content: "删除失败",
              key: removeKey,
              duration: 1
            })
          }
        })
      }
    });
  }
  const handleExport = () => {}

  const openDialog = (type) => {
    state[type] = true
  }

  const search = (value) => {
    state.param = {
      ...state.param,
      ...filterEmptyByObject(value)
    }
  }

  const onSelectChange = selectedRowKeys => {
    state.selectedRowKeys = selectedRowKeys;
  };

  onMounted(async () => {
    dictLists.data = await getDictByCodesReturnObj([
      dictEnum.AGREEMENT_STATUS,
      dictEnum.PAY_STATUS,
      dictEnum.PAY_TYPE,
    ])
    searchParams.params = [
      {
        dataIndex: "stuName",
        key: "stuName",
        type: "input",
        label: t('deposit-manage.label.stuName'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "project",
        key: "project",
        type: "input",
        label: t('deposit-manage.openDialog.projectName'),
        placeholder: t('placeholder.pleaseEnter'),
      },
    ]
    tableConfig.columns = [
      {
        dataIndex: "stuName",
        key: "stuName",
        title: t('deposit-manage.label.stuName'),
      },
      {
        dataIndex: "course",
        key: "course",
        title: t('deposit-manage.title.courseName'),
      },
      {
        dataIndex: "project",
        key: "project",
        title: t('deposit-manage.title.projectName'),
      },
      {
        dataIndex: "deposit",
        key: "deposit",
        title: t('deposit-manage.title.depositprice'),
      },
      {
        dataIndex: "payChn",
        key: "payChn",
        title: t('deposit-manage.title.fktype'),
        cellRender: (record, data) => {
          if (dictLists.data[dictEnum.PAY_TYPE]) {
            const item = dictLists.data[dictEnum.PAY_TYPE].find(
              v => v.value == data
            );
            return item ? item.label : "";
          }
        }
      },
      {
        dataIndex: "deductionStatus",
        key: "deductionStatus",
        title: t('deposit-manage.title.depositstu'),
      },
      {
        dataIndex: "totalAmt",
        key: "totalAmt",
        title: t('deposit-manage.title.paytotalprice'),
      }
    ]
  })
</script>
